<template>
    <div class="detail">
         <h3>试卷名称: <span>{{ detail?.name }}</span></h3>
         <div>
             <p>用户: <span>学生</span></p>
             <p>考试时间: <span>{{ detail.time | formatime}}</span></p>
             <p>总分: <span>{{ detail.total }}</span>分</p>
             <p>及格线: <span>{{ detail.passline }}</span>分</p>
            
         </div>

         <div class="btn-group">
            <el-button type="info" plain @click="goBack">返回</el-button>
            <el-button type="success" @click="jumpTo">开始考试</el-button>
         </div>
    </div>
</template>
<script>
// 导入辅助函数
import { mapState } from 'vuex'


export default {

    // 过滤器 （工具类函数）
    filters: {
         // 工具函数 格式化时间
         formatime(value) {
            let h = 0;
            let m = 0;
            let s = 0;
            h = Math.floor(value / 3600);
            m = Math.floor(value % 3600 / 60);
            s = Math.floor(value % 60);
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return `${h}:${m}:${s}`;
        }
    },

    // 设置数据
    data(){
        return {
            detail: {},
            eid: ""
        }
    },

    // 把状态库的数据挂到Vue组件上
    computed: {
        ... mapState(['exam']), 
    },

    created(){
        // 试卷ID
        let {eid} = this.$route.query;
        if(eid) {
            // 记录试卷ID
            this.eid = eid;
            // console.log({eid});
            // 根据这个id检索对应的详情信息
            // console.log(this.exam);
            let { examination } = this.exam;
            // 判断是否有值
            if(examination) {
                 let arr = examination.filter(item => item.eid == eid);
                //  console.log(arr);
                 this.detail = arr[0];
            }
        }
    },
    methods: {
        goBack(){
             this.$router.go(-1)
        },
        jumpTo(){
            // console.log("click")
            // 一点提示也没有就考试，太突然了，用户体验差
            // this.$router.push({path:"/test",query: {eid: this.eid}})// 跳转考试界面

            // 给用户做提示
            this.$alert('您确定要选择这套试卷吗?', '温馨提示', {
                confirmButtonText: '确定',
                callback: (action) => {
                    // console.log(action)
                    if(action == 'confirm') {
                         this.$router.push({path:"/test",query: {eid: this.eid}})// 跳转考试界面
                    }
                    // console.log("是的，确定要求考试");// 在这里做提交试卷的逻辑
                }
            })
        },
    }
}

</script>

<style lang="less">
@import '../common/less/varible.less';
.detail {
    padding: @pad;
     h3 {
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid #000;
     }
     div {
        p {
            height: 40px;
            line-height: 40px;
            font-size: 17px;
            color: #666;
        }
     }
     .btn-group {
        margin-top: 20px;
     }
}
.el-message-box {
    width: 90%;
}
.el-message-box__btns {
    .el-button--primary {
        background-color: @bgColor;
        color: #fff;
        border-color:  @bgColor;
    }
}
</style>